<template>
    <div>
        <div class="desk">
            <div class="dashboard">
                <ELNodeComponent :el-node="items" @code="showCode($event)"></ELNodeComponent>


                <div class="operate ">
                    <button @click="check">查看链路</button>
                    <button @click="genJSON">生成JSON</button>
                </div>

            </div>

            <EditeScriptView v-show="showScriptEditor" :codeProp="code" :code="code" @submitCode="dealCode($event)"></EditeScriptView>
        </div>
    </div>

</template>


<script setup lang="ts">
import { ref, reactive } from 'vue'
import ELNodeComponent from '../components/ELNodeComponent.vue';
import { ELNode } from '../ts/ELNode';
import EditeScriptView from './EditeScriptView.vue';

let then = new ELNode("elType", "THEN", "开始")
then.thenCss = true
const items = reactive<ELNode>(
    then
);

//传给编辑器
const code = ref('')
const showScriptEditor=ref(false)

let getNode: ELNode

//获取编辑器的code
const dealCode = (e: any) => {
    console.log('dealCode', e)
    //把脚本保存到节点中
    getNode.code = e
    showScriptEditor.value = false

}
const showCode = (e: ELNode) => {
    console.log('父节点', e)
    getNode = e
    if (e.code) {
        console.log("父节点获取code", e.code)
        code.value = e.code
        showScriptEditor.value = true
    }

}

const check = () => {
    console.log(items)
}

const genJSON = () => {
    let s = items.genJson()
    console.log(s)
    alert(s)
}



</script>

<style scoped>
.desk{
    display: flex;
    /* 默认水平 */
    flex-direction: row;
    /* 不换行 */
    flex-wrap: nowrap;
    /* 定义了项目在主轴(横轴)上的对齐方式 */
    justify-content:space-between;
    /* 元素在侧轴（纵轴）方向上的对齐方式 */
    align-items: center;

    /* border: 1px solid red; */
}
.dashboard {
    display: flex;
    /* 默认水平 */
    flex-direction: column;
    /* 不换行 */
    flex-wrap: nowrap;
    /* 定义了项目在主轴(横轴)上的对齐方式 */
    justify-content: center;
    /* 元素在侧轴（纵轴）方向上的对齐方式 */
    align-items: flex-start;

    /* border: 1px solid blue; */
}

.cmp {
    display: flex;
    /* 默认水平 */
    flex-direction: row;

    /* 定义了项目在主轴(横轴)上的对齐方式 */
    justify-content: center;
    /* 元素在侧轴（纵轴）方向上的对齐方式 */
    align-items: center;


    /* padding:1 1 1 1; */
    border: 1px solid red;
}

.con {
    padding-left: 1vh;
    padding-right: 1vh;
}

.operate {
    display: flex;
    /* 默认水平 */
    flex-direction: row;
    /* 不换行 */
    flex-wrap: nowrap;
    /* 定义了项目在主轴(横轴)上的对齐方式 */
    justify-content: center;
    /* 元素在侧轴（纵轴）方向上的对齐方式 */
    align-items: center;

    border: 1px solid green;

    margin-top: 10vh;
}
</style>